import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { RestOutlined } from '@ant-design/icons'
//引入组件
import Backdrop from './../../UI/Backdrop/Backdrop'
import Meal from './../../Meals/Meal/Meal'
//引入切片
import { updPickedMeals } from '../../../redux/slices/counter'

//引入样式
import classes from './CartDetail.module.css'

const CartDetail = () => {
	const pickedMeals = [...useSelector(state => state.counter.value)]
	const dispatch = useDispatch()
	const clearCart = () => {
		const emp = []
		dispatch(updPickedMeals(emp))
	}
	// console.log(pickedMeals)

	return (
		<Backdrop rootLocation='backdrop-root' >
			<div className={classes.Container}>
				<div className={classes.Wrapper}>
					<div className={classes.DetailHeader}>
						<p className={classes.DetailTitle}>餐品详情</p>
						<div className={classes.DetailClear} onClick={clearCart}>
							<span className={classes.ClearIcon}>
								<RestOutlined />
							</span>
							清空购物车
						</div>
					</div>
					<div className={classes.DetailList}>
						{pickedMeals.map(m => (
							<Meal key={m.id} {...m} haveDesc={false} />
						))}
					</div>
				</div>
			</div>
		</Backdrop>
	)
}

export default CartDetail
